<template>
  <div>
    <!-- vue官方文档里推荐，写html标签的时候最好写小写 -->
    <!-- 多个单词之间用-连接 -->
    <!-- <MyPanel></MyPanel> -->

    <!-- 行内属性如果不加冒号，它永远都是字符串 -->
    <!-- <my-panel title="湖南臭豆腐" price="10" desc="闻起来臭，吃起来不臭，拉起来臭"></my-panel> -->

    <!-- <my-panel
      title="湖南臭豆腐"
      :price="10"
      desc="闻起来臭，吃起来不臭，拉起来臭"
    ></my-panel>

    <my-panel title="广西螺丝粉" :price="15"></my-panel> -->

    <!-- <my-panel :title="obj.title" :price="obj.price" :desc="obj.desc"></my-panel> -->

    <!-- 
      $event在原生标签里代表事件对象
      $event在组件里代表这个组件传递过来的值
     -->
    <my-panel
      v-for="item in list"
      :key="item.id"
      :title="item.name"
      :price="item.price"
      :desc="item.desc"
      @cut="fn(item, $event)"
    ></my-panel>

  </div>
</template>

<script>
import MyPanel from './components/MyPanel.vue'
export default {
  components: {
    MyPanel
  },
  data () {
    return {
      // obj: {
      //   title: '广西螺蛳粉',
      //   price: 999,
      //   desc: '这碗螺蛳粉有点贵，表锅喜欢'
      // }

      // 服务器返回的
      list: [
        { id: 11, name: '潮汕粥', price: 99, desc: '营养美味' },
        { id: 33, name: '猪脚饭', price: 15, desc: '肥肥的' },
        { id: 39, name: '沙县小吃', price: 14, desc: '吃蒸饺和汤' },
        { id: 434, name: '自选快餐', price: 14, desc: '随便选' }
      ]
    }
  },
  methods: {
    fn (item, num) {
      // console.log('儿子通知了', num)
      // console.log(item, num)
      // 当前这一项的价格减去了子传过来的值
      item.price -= num
    }
  }
}
</script>

<style></style>
